﻿@page "/Button"

    <div class="demo-description">
        <h2><DemoNavLink Link="Button#Style" />Styles</h2>
        <p>
            This demo illustrates the DevExpress Blazor <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton">Button</a> component with different styles and options. The main Button API members are listed below.
        </p>
        <ul>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton.Text">Text</a> – Specifies the text within the button.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton.RenderStyle">RenderStyle</a> – Specifies the button’s render style.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton.RenderStyleMode">RenderStyleMode</a> – Specifies how to apply the render style to the button.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton.Click">Click</a> - Occurs after the button is clicked.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton.Enabled">Enabled</a> - Enables/disables the button. The disabled button (<b>Enabled</b> is set to <b>false</b>) does not respond to user actions.</li>
        </ul>
        <p>
            The Button component supports different size modes. To specify the component's size in code, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton.SizeMode">SizeMode</a> property. To apply different size modes, use the drop-down list in the demo card's header.
        </p>
    </div>
<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="@FirstDemoSizeMode" Title="Click buttons to update the code snippet"/>
    </div>
    <div class="card-body">
        <table width="100%" cellpadding="0" cellspacing="0">

            <tr>
                <td>
                    <div class="row" style="display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;">
                        <div class="col col-12 col-sm-auto demo-buttons-title" style="padding-top:0">Contained style:</div>
                        @foreach (ButtonRenderStyle style in renderStyles) {
                            <div class="col col-6 col-sm-auto" style="border: 0px; padding: 1em 0.5em;">
                                <DxButton RenderStyle="@style" CssClass="w-100" Text="@Enum.GetName(typeof(ButtonRenderStyle), style)" Click="@((args) => { CreateSnippet(style, ButtonRenderStyleMode.Contained); })" SizeMode="FirstDemoSizeMode" />
                            </div>
                        }
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="row" style="display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start">
                        <div class="col col-12 col-sm-auto demo-buttons-title">Outline style:</div>
                        @foreach (ButtonRenderStyle style in renderStyles) {
                            <div class="col col-6 col-sm-auto" style="border: 0px; padding: 1em 0.5em;">
                                <DxButton RenderStyle="@style" CssClass="w-100" RenderStyleMode="@ButtonRenderStyleMode.Outline" Text="@Enum.GetName(typeof(ButtonRenderStyle), style)" Click="@((args) => { CreateSnippet(style, ButtonRenderStyleMode.Outline); })" SizeMode="FirstDemoSizeMode" />
                            </div>
                        }
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="row" style="display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start">
                        <div class="col col-12 col-sm-auto demo-buttons-title">Text style:</div>
                        @foreach (ButtonRenderStyle style in renderStyles) {
                            <div class="col col-6 col-sm-auto" style="border: 0px; padding: 1em 0.5em;">
                                <DxButton RenderStyle="@style" CssClass="w-100" RenderStyleMode="@ButtonRenderStyleMode.Text" Text="@Enum.GetName(typeof(ButtonRenderStyle), style)" Click="@((args) => { CreateSnippet(style, ButtonRenderStyleMode.Text); })" SizeMode="FirstDemoSizeMode" />
                            </div>
                        }
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="row" style="display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start">
                        <div class="col col-12 col-sm-auto demo-buttons-title">Disabled:</div>
                        @foreach (ButtonRenderStyle style in renderStyles) {
                            <div class="col col-6 col-sm-auto" style="border: 0px; padding: 1em 0.5em;">
                                <DxButton RenderStyle="@style" CssClass="w-100" RenderStyleMode="@ButtonRenderStyleMode.Contained" Text="@Enum.GetName(typeof(ButtonRenderStyle), style)" SizeMode="FirstDemoSizeMode" Enabled="false"/>
                            </div>
                        }
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
<CodeSnippet_Button_Styles RenderStyle="@buttonRenderStyle" RenderStyleMode="@buttonRenderStyleMode" StyleName="@styleName" SizeMode="@FirstDemoSizeMode" />
@code {
    ButtonRenderStyle buttonRenderStyle = ButtonRenderStyle.None;
    ButtonRenderStyleMode buttonRenderStyleMode = ButtonRenderStyleMode.Contained;
    string styleName = "None";

    SizeMode FirstDemoSizeMode { get; set; } = SizeMode.Small;

    void CreateSnippet(ButtonRenderStyle renderStyle, ButtonRenderStyleMode renderMode) {
        buttonRenderStyle = renderStyle;
        buttonRenderStyleMode = renderMode;
        styleName = buttonRenderStyle.ToString();
    }
}
<br />

<div class="demo-description">
    <h2><DemoNavLink Link="Button#Icons" />Icons</h2>
    <p>
        This demo illustrates how to display an icon in the Button component.
        <ul>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton.IconCssClass">IconCssClass</a> – Specifies the name of the icon’s CSS class.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton.IconPosition">IconPosition</a> – Specifies the icon’s position relative to the text.</li>
        </ul>
        The demo also shows how to use the <b>Title</b> HTML attribute to display a tooltip text when the mouse moves over the button.
    </p>
</div>
<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="@SecondDemoSizeMode" Title="Hover over a button"/>
    </div>
    <div class="card-body">
        <DxButton RenderStyle="ButtonRenderStyle.Dark" Text="Undo" Title="Undo the last action." IconCssClass="undo" style="margin-right: 0.5em;" SizeMode="SecondDemoSizeMode"/>
        <DxButton RenderStyle="ButtonRenderStyle.Dark" Text="Redo" Title="Restore the previously undone action." IconCssClass="redo" IconPosition="ButtonIconPosition.AfterText" SizeMode="SecondDemoSizeMode"/>
    </div>
</div>
<CodeSnippet_Button_Picture />
@code {
    SizeMode SecondDemoSizeMode { get; set; } = SizeMode.Small;
}
<div class="demo-description">
    <h2><DemoNavLink Link="Button#CustomContent" />Custom Content</h2>
    <p>
        This demo illustrates how to customize the Button’s appearance and content.
    </p>
</div>
<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="@ThirdDemoSizeMode" Title=" Click the button to increase the number of likes"/>
    </div>
    <div class="card-body">
        <DxButton RenderStyle="ButtonRenderStyle.Info" Click="@Like" IconCssClass="like" Text="Like" SizeMode="ThirdDemoSizeMode">
            @context
            <span style="width: 0.8em; margin-left: 8px;">@(likes < 10 ? likes.ToString() : "9")</span>
        </DxButton>
    </div>
</div>
<CodeSnippet_Button_Template />
@code {
    int likes;
    List<ButtonRenderStyle> renderStyles;

    SizeMode ThirdDemoSizeMode { get; set; } = SizeMode.Small;

    protected override void OnInitialized() {
        likes = 1;
        Array namesAsArray = Enum.GetValues(typeof(ButtonRenderStyle));
        renderStyles = new List<ButtonRenderStyle>(namesAsArray.Length);
        for (int itemIndex = 0; itemIndex < namesAsArray.Length; itemIndex++)
            renderStyles.Add((ButtonRenderStyle)namesAsArray.GetValue(itemIndex));
    }
    void Like(MouseEventArgs args) {
        likes++;
    }
}
